<script setup lang="ts">
import { PropType, watch, ref } from "vue";
import { ElForm, ElFormItem, FormInstance } from "element-plus";
import Upload from "@/components/Upload.vue";
import SelectBase from "@/components/SelectBase.vue";
const
  props = defineProps({
    modelValue: { type: Object as PropType<gt.sql.prize>, default: format.def.prize, },
    disabled: { type: Boolean, default: false }
  }),
  rules = ref({
    name: { required: true, message: "名称2-20个字符", trigger: "blur", min: 2, max: 20, },
    value: { required: true, message: "奖励内容不能为空", min: 3 }
  }),
  entity = ref<FormInstance>(),
  types = ref(["商品", "现金", "其他"]),
  type = ref("商品"),
  content = ref<number | string | gt.sql.goods | undefined>("")
  ;
let run = true;
watch(() => props.modelValue.value, async (n) => {
  if (run && n) {
    const r = n.split(":");
    if (r.length == 2) {
      switch (r[0]) {
        case "goods":
          type.value = types.value[0];
          content.value = await gd.goods.getById(r[1]);
          break;
        case "money":
          type.value = types.value[1];
          content.value = parseInt(r[1]);
          break;

        default:
          type.value = types.value[2];
          content.value = r[1];
          break;
      }
    }
  }
}, { deep: true, immediate: true });
watch(type, n => {
  if (n == "现金") {
    content.value = parseInt(content.value) || 0;
  } else {
    if (typeof content.value == "number") {
      content.value = "";
    }
  }
});
watch(content, n => {
  run = false;
  if (n) {
    switch (type.value) {
      case "商品":
        props.modelValue.value = "goods:" + (n as gt.sql.goods).id;
        break;
      case "现金":
        props.modelValue.value = "money:" + n;
        break;

      default:
        props.modelValue.value = "other:" + n;
        break;
    }
  } else {
    props.modelValue.value = "";
  }
  next(() => {
    run = true;
  });
});
defineExpose({
  validate() {
    return new Promise<boolean>((resolve) => {
      if (entity.value) {
        entity.value.validate().then(resolve).catch(() => { resolve(false); });
      } else {
        resolve(false);
      }
    });
  },
  resetFields() { entity.value?.resetFields(); }
});
async function select(cbk: InstanceType<typeof SelectBase>["open"]) {
  content.value = await cbk("goods", "请选择奖励内容");
}

</script>
<template>
  <ElForm class="order xw zb" ref="entity" :model="modelValue" :rules="rules" labelWidth="6em">
    <ElFormItem label="id" prop="id"><el-input v-model="modelValue.id" disabled placeholder="系统自动生成" /></ElFormItem>
    <div class="x wf oh">
      <div class="y w50">
        <ElFormItem label="名称" prop="name">
          <el-input v-model="modelValue.name" placeholder="请输入名称" :disabled="disabled" />
        </ElFormItem>
        <div class="x">
          <ElFormItem label="名称颜色" prop="nameColor">
            <el-color-picker v-model="modelValue.nameColor" color-format="hex" />
          </ElFormItem>
          <ElFormItem label="背景颜色" prop="bgColor">
            <el-color-picker v-model="modelValue.bgColor" color-format="hex" />
          </ElFormItem>
        </div>
        <ElFormItem label="数量" prop="sum">
          <el-input-number v-model="modelValue.sum" :min="0" :disabled="disabled" />
        </ElFormItem>
        <ElFormItem label="权重" prop="weight">
          <el-input-number v-model="modelValue.weight" :min="0" :disabled="disabled" />
        </ElFormItem>
      </div>
      <ElFormItem label="图片" prop="image" class="fg1">
        <Upload v-model="modelValue.image" :disabled="disabled" base64 single />
      </ElFormItem>
    </div>

    <ElFormItem class="wf" label="奖池" prop="value">
      <div class="wf y">
        <div class="tools x bx oh">
          <span>奖品种类:</span>
          <el-select v-model="type" placeholder="请选择奖品类型">
            <el-option v-for="i in types" :key="i" :label="i" :value="i" />
          </el-select>
          <span>奖励内容{{ type == "现金" ? "(单位:分)" : "" }}:</span>
          <el-input v-if="type == '其他'" v-model="content" placeholder="请输入便于理解的内容" />
          <el-input-number v-else-if="type == '现金'" v-model="content" :min="0" />
          <SelectBase v-else-if="type == '商品'" @click="select" />
        </div>
      </div>
    </ElFormItem>
  </ElForm>
</template>
<style lang="scss" scoped>
.order {
  position: relative;
  >:not(.wf) {
    width: 49%;
  }
  .tools {
    padding: 0.4em;
    >span {
      flex-shrink: 0;
      margin: 0 1em;
    }
    >.el-select {
      width: 8em;
      flex-shrink: 0;
    }
  }
}
</style>